<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                template="../templates/principal.xhtml">

    <ui:define name="content" id="content">        
        <h:form id="frmPropostaEtapa">
            <p:growl id="messages" life="5000" />

            <p:panel id="panel" header="Bem Vindo ao Cadastro de Escopo - Honorários">
                <p:dataTable id="tabPropostaEtapa" widgetVar="wtabPropostaEtapa" var="propostaEtapa" value="#{propostaEtapaBean.lazyModel}" paginator="true" rows="15" 
                             paginatorPosition="top" emptyMessage="Nenhum Registro Retornado ..." lazy="true" filterEvent="enter">

                    <p:ajax event="rowToggle" listener="#{propostaEtapaBean.onRowToggle}" update=":frmPropostaEtapa:panelPropostaEtapa" />

                    <p:column style="width:4%">   
                        <p:rowToggler />
                    </p:column>

                    <p:column headerText="Nome da Etapa" sortBy="#{propostaEtapa.nomEtapa}" filterBy="#{propostaEtapa.nomEtapa}" style="text-align: left">
                        <h:outputText value="#{propostaEtapa.nomEtapa}" />
                    </p:column>

                    <p:rowExpansion>
                        <p:dataTable id="tabPropostaEtapaDesc" var="propostaEtapaDesc" value="#{propostaEtapa.propostaEtapaDescList}" paginator="true" rows="15" 
                                     paginatorPosition="top" emptyMessage="Nenhum Registro Retornado ..." filterEvent="enter">

                            <p:column headerText="No.Etapa" sortBy="#{propostaEtapaDesc.numEtapa}" filterBy="#{propostaEtapaDesc.numEtapa}" style="text-align: left">
                                <h:outputText value="#{propostaEtapaDesc.numEtapa}" />
                            </p:column>
<!--
                            <p:column headerText="Complemento No.Etapa" style="text-align: left">
                                <h:outputText value="#{propostaEtapaDesc.numEtapaCompl}" />
                            </p:column>
-->
                            <p:column headerText="Primeira Descrição" sortBy="#{propostaEtapaDesc.dscEtapa1}" filterBy="#{propostaEtapaDesc.dscEtapa1}" style="text-align: left">
                                <h:outputText value="#{propostaEtapaDesc.dscEtapa1}" />
                            </p:column>

                            <p:column headerText="Segunda Descrição" sortBy="#{propostaEtapaDesc.dscEtapa2}" filterBy="#{propostaEtapaDesc.dscEtapa2}" style="text-align: left">
                                <h:outputText value="#{propostaEtapaDesc.dscEtapa2}" />
                            </p:column>
                        </p:dataTable>
                    </p:rowExpansion>

                    <p:column style="width: 100px;">
                        <h:panelGrid columns="4" styleClass="actions" cellpadding="0">
                            <p:commandButton id="selectButton" update=":frmPropostaEtapa:panel, :frmPropostaEtapa:messages" 
                                             icon="ui-icon-search" title="Visualizar // Alterar Etapas - Honorários" oncomplete="PF('propostaEtapaDialog').show(); PF('propostaEtapaDialog').toggleMaximize();">
                                <f:setPropertyActionListener value="#{propostaEtapa}" target="#{propostaEtapaBean.selectedPropostaEtapa}" />
                                <f:setPropertyActionListener value="#{false}" target="#{propostaEtapaBean.altera}" />
                            </p:commandButton>

                            <p:commandButton id="excluirButton" update=":frmPropostaEtapa:panel, :frmPropostaEtapa:messages" 
                                             icon="ui-icon-trash" title="Excluir Etapas - Honorários" oncomplete="PF('confirmation').show()">
                                <f:setPropertyActionListener value="#{propostaEtapa}" target="#{propostaEtapaBean.selectedPropostaEtapa}" />
                            </p:commandButton>
                        </h:panelGrid>
                    </p:column>

                    <f:facet name="footer">
                        <div style="text-align: left;">
                            <p:commandButton id="incluirButton" actionListener="#{propostaEtapaBean.preparaInserir}" 
                                             update=":frmPropostaEtapa:panel, :frmPropostaEtapa:messages"  value="Novo Escopo - Honorários"
                                             icon="ui-icon-pencil" title="Cadastrar Novo Etapas - Honorários" oncomplete="PF('propostaEtapaDialog').toggleMaximize(); PF('propostaEtapaDialog').show();" />
                        </div>
                    </f:facet>
                </p:dataTable>

                <!-- DETALHES ETAPA -->
                <p:dialog id="dialogPropostaEtapa" header="Detalhes Etapas - Escopo/Honorários" widgetVar="propostaEtapaDialog" resizable="true"
                          showEffect="explode" hideEffect="explode" style="text-align: left;" position="top" onHide="PF('propostaEtapaDialog').toggleMaximize();" maximizable="true">
                    <p:panel id="panelPropostaEtapa" style="width: 100%;">
                        <p:focus context="panelPropostaEtapa" for="inDescricao" />

                        <p:panelGrid id="displayPropostaEtapa" style="width: 100%;">
                            <f:facet name="header">
                                <p:row>
                                    <p:column colspan="4">
                                        <h:outputText value="Detalhes Escopo" />
                                    </p:column>
                                </p:row>
                            </f:facet>

                            <p:row>
                                <p:column colspan="4">
                                    <p:dataTable id="tabPropostaEtapaDescDetalhe" var="propostaEtapaDescDetalhe" value="#{propostaEtapaBean.selectedPropostaEtapa.propostaEtapaDescList}" 
                                                 paginator="true" rows="2" paginatorPosition="top" emptyMessage="Nenhum Registro Retornado ..." 
                                                 rowIndexVar="rowIdDesc" filterEvent="enter">

                                        <p:column headerText="Nome da Etapa" sortBy="#{propostaEtapaDescDetalhe.idEtapa.nomEtapa}" filterBy="#{propostaEtapaDescDetalhe.idEtapa.nomEtapa}" style="text-align: left">
                                            <h:outputText value="#{propostaEtapaDescDetalhe.idEtapa.nomEtapa}" />
                                        </p:column>

                                        <p:column headerText="No.Etapa" sortBy="#{propostaEtapaDescDetalhe.numEtapa}" filterBy="#{propostaEtapaDescDetalhe.numEtapa}" style="text-align: left">
                                            <h:outputText value="#{propostaEtapaDescDetalhe.numEtapa}" />
                                        </p:column>
<!--
                                        <p:column headerText="Complemento No.Etapa" style="text-align: left">
                                            <h:outputText value="#{propostaEtapaDescDetalhe.numEtapaCompl}" />
                                        </p:column>
-->
                                        <p:column headerText="Primeira Descrição" sortBy="#{propostaEtapaDescDetalhe.dscEtapa1}" filterBy="#{propostaEtapaDescDetalhe.dscEtapa1}" style="text-align: left">
                                            <h:outputText value="#{propostaEtapaDescDetalhe.dscEtapa1}" />
                                        </p:column>

                                        <p:column headerText="Segunda Descrição" sortBy="#{propostaEtapaDescDetalhe.dscEtapa2}" filterBy="#{propostaEtapaDescDetalhe.dscEtapa2}" style="text-align: left">
                                            <h:outputText value="#{propostaEtapaDescDetalhe.dscEtapa2}" />
                                        </p:column>

                                        <p:column style="width: 100px;">
                                            <h:panelGrid columns="4" styleClass="actions" cellpadding="0">
                                                <p:commandButton id="selectButtonDesc" update=":frmPropostaEtapa:panelPropostaEtapa, :frmPropostaEtapa:messages" 
                                                                 icon="ui-icon-search" title="Visualizar // Alterar Etapa">
                                                    <f:setPropertyActionListener value="#{propostaEtapaDescDetalhe}" target="#{propostaEtapaBean.selectedPropostaEtapaDesc}" />
                                                    <f:setPropertyActionListener value="#{false}" target="#{propostaEtapaBean.alteraDesc}" />
                                                    <f:setPropertyActionListener value="#{rowIdDesc}" target="#{propostaEtapaBean.rowidesc}" />
                                                </p:commandButton>

                                                <p:commandButton id="excluirButtonPerc" update=":frmPropostaEtapa:panelPropostaEtapa, :frmPropostaEtapa:messages" 
                                                                 icon="ui-icon-trash" title="Excluir Etapa" oncomplete="PF('confirmationDesc').show()">
                                                    <f:setPropertyActionListener value="#{propostaEtapaDescDetalhe}" target="#{propostaEtapaBean.selectedPropostaEtapaDesc}" />
                                                    <f:setPropertyActionListener value="#{rowIdDesc}" target="#{propostaEtapaBean.rowidesc}" />
                                                </p:commandButton>
                                            </h:panelGrid>
                                        </p:column>
                                        <f:facet name="footer">
                                            <div style="text-align: right;">
                                                <p:commandButton id="incluirButtonPerc" actionListener="#{propostaEtapaBean.preparaInserirDesc}" 
                                                                 update=":frmPropostaEtapa:panelPropostaEtapa, :frmPropostaEtapa:messages"  value="Novo Escopo"
                                                                 icon="ui-icon-pencil" title="Cadastrar Escopo" />
                                            </div>
                                        </f:facet>
                                    </p:dataTable>
                                </p:column>
                            </p:row>

                            <p:row>
                                <p:column>
                                    <h:outputText value="Nome da Etapa:" />
                                </p:column>

                                <p:column colspan="3">
                                    <p:inputText id="inDescricao" widgetVar="inDescricao" value="#{propostaEtapaBean.selectedPropostaEtapa.nomEtapa}" maxlength="200" style="width:1000px; font-weight:bold;" />
                                </p:column>
                            </p:row>
                            <p:row>
                                <p:column>
                                    <h:outputText value="Numero da Etapa:" />
                                </p:column>
                                <p:column colspan="3">
                                    <p:inputText onkeyup="maskIt(this, event, '###', true)" maxlength="3" id="spinnerBasic" value="#{propostaEtapaBean.selectedPropostaEtapaDesc.numEtapa}" />
                                </p:column>
<!--
                                <p:column>
                                    <h:outputText value="Complemento:" />
                                </p:column>
                                <p:column>
                                    <p:inputMask mask="999" value="#{propostaEtapaBean.selectedPropostaEtapaDesc.numEtapaCompl}" />
                                </p:column>
-->
                            </p:row>
                            <p:row>
                                <p:column>
                                    <h:outputText value="Primeiro Descritivo:" />
                                </p:column>
                                <p:column>
                                    <p:inputText id="inDescritivo1" value="#{propostaEtapaBean.selectedPropostaEtapaDesc.dscEtapa1}" maxlength="50" style="width:500px; font-weight:bold;" />
                                </p:column>
                                <p:column>
                                    <h:outputText value="OBS. Primeiro Descritivo:" />
                                </p:column>
                                <p:column>
                                    <p:inputTextarea rows="1" cols="80" autoResize="false" value="#{propostaEtapaBean.selectedPropostaEtapaDesc.obsEtapa1}" style="width:400px; font-weight:bold;" />
                                </p:column>
                            </p:row>
                            <p:row>
                                <p:column>
                                    <h:outputText value="Segundo Descritivo:" />
                                </p:column>
                                <p:column>
                                    <p:inputText id="inDescritivo2" value="#{propostaEtapaBean.selectedPropostaEtapaDesc.dscEtapa2}" maxlength="50" style="width:500px; font-weight:bold;" />
                                </p:column>
                                <p:column>
                                    <h:outputText value="OBS. Segundo Descritivo:" />
                                </p:column>
                                <p:column>
                                    <p:inputTextarea rows="1" cols="80" autoResize="false" value="#{propostaEtapaBean.selectedPropostaEtapaDesc.obsEtapa2}" style="width:400px; font-weight:bold;" />
                                </p:column>
                            </p:row>

                            <p:row>
                                <p:column colspan="4">
                                    <p:dataTable id="tabPropostaEtapaPerc" widgetVar="wtabPropostaEtapaPerc" var="propostaEtapaPerc" filterEvent="enter" 
                                                 value="#{propostaEtapaBean.selectedPropostaEtapaDesc.propostaEtapaPercList}" paginator="true" rows="2" 
                                                 paginatorPosition="top" emptyMessage="Nenhum Registro Retornado ..." rowIndexVar="rowId">

                                        <f:facet name="header">
                                            <h:outputText value="Detalhes Honorários" />
                                        </f:facet>

                                        <p:column headerText="Descrição" style="text-align: left;">
                                            <h:outputText value="#{propostaEtapaPerc.dscPerc}" />
                                        </p:column>

                                        <p:column headerText="Percentual %">
                                            <div style="text-align: right;">
                                                <h:outputText value="#{propostaEtapaPerc.percEtapa}">
                                                    <f:convertNumber type="percent" pattern="###0.00" locale="pt-BR"/>
                                                </h:outputText>
                                            </div>
                                        </p:column>

                                        <p:column style="width: 100px;">
                                            <h:panelGrid columns="4" styleClass="actions" cellpadding="0">
                                                <p:commandButton id="selectButtonPerc" update=":frmPropostaEtapa:displayPropostaEtapaPerc, :frmPropostaEtapa:messages" 
                                                                 icon="ui-icon-search" title="Visualizar // Alterar Honorário">
                                                    <f:setPropertyActionListener value="#{propostaEtapaPerc}" target="#{propostaEtapaBean.selectedPropostaEtapaPerc}" />
                                                    <f:setPropertyActionListener value="#{false}" target="#{propostaEtapaBean.alteraPerc}" />
                                                    <f:setPropertyActionListener value="#{rowId}" target="#{propostaEtapaBean.rowid}" />
                                                </p:commandButton>

                                                <p:commandButton id="excluirButtonPerc" update=":frmPropostaEtapa:tabPropostaEtapaPerc, :frmPropostaEtapa:messages" 
                                                                 icon="ui-icon-trash" title="Excluir Honorário" oncomplete="PF('confirmationPerc').show()">
                                                    <f:setPropertyActionListener value="#{propostaEtapaPerc}" target="#{propostaEtapaBean.selectedPropostaEtapaPerc}" />
                                                    <f:setPropertyActionListener value="#{rowId}" target="#{propostaEtapaBean.rowid}" />
                                                </p:commandButton>
                                            </h:panelGrid>
                                        </p:column>
                                        <f:facet name="footer">
                                            <div style="text-align: right;">
                                                <p:commandButton id="incluirButtonPerc" actionListener="#{propostaEtapaBean.preparaInserirPerc}" 
                                                                 update=":frmPropostaEtapa:displayPropostaEtapaPerc, :frmPropostaEtapa:messages"  value="Novo Honorário"
                                                                 icon="ui-icon-pencil" title="Cadastrar Percentual" />
                                            </div>
                                        </f:facet>
                                    </p:dataTable>
                                </p:column>
                            </p:row>
                            <p:row>
                                <p:column colspan="4">
                                    <p:panelGrid id="displayPropostaEtapaPerc" columns="2" style="width: 100%;">
                                        <h:outputText value="Descrição:" style="width: 20px;" />
                                        <p:inputText id="inDescricaoPerc" value="#{propostaEtapaBean.selectedPropostaEtapaPerc.dscPerc}" maxlength="200" style="width:1600px; font-weight:bold;" />

                                        <h:outputText value="Percentual:" />
                                        <p:inputText id="inPercentual" value="#{propostaEtapaBean.selectedPropostaEtapaPerc.percEtapa}" style="width:200px; font-weight:bold; text-align: right;"
                                                     onkeyup="javascript:maskIt(this, event, '####,##', true)">
                                            <f:convertNumber locale="pt_BR" pattern="##0.00" minFractionDigits="2" />
                                        </p:inputText>

                                        <f:facet name="footer">
                                            <div style="text-align: right;">
                                                <p:commandButton value="Inserir Honorário" update=":frmPropostaEtapa:tabPropostaEtapaPerc, :frmPropostaEtapa:displayPropostaEtapaPerc, :frmPropostaEtapa:messages" 
                                                                 rendered="#{propostaEtapaBean.alteraPerc}" actionListener="#{propostaEtapaBean.inserirPerc}" />
                                                <p:commandButton value="Alterar Honorário" update=":frmPropostaEtapa:tabPropostaEtapaPerc, :frmPropostaEtapa:displayPropostaEtapaPerc, :frmPropostaEtapa:messages" 
                                                                 rendered="#{!propostaEtapaBean.alteraPerc}" actionListener="#{propostaEtapaBean.alterarPerc}" />
                                            </div>
                                        </f:facet>
                                    </p:panelGrid>
                                </p:column>
                            </p:row>

                            <f:facet name="footer">
                                <p:row>
                                    <p:column colspan="4">
                                        <p:commandButton value="Inserir Novo Escopo" update=":frmPropostaEtapa:panelPropostaEtapa, :frmPropostaEtapa:messages" 
                                                         rendered="#{propostaEtapaBean.alteraDesc}" actionListener="#{propostaEtapaBean.inserirDesc}" />
                                        <p:commandButton value="Alterar Escopo" update=":frmPropostaEtapa:panelPropostaEtapa, :frmPropostaEtapa:messages" 
                                                         rendered="#{!propostaEtapaBean.alteraDesc}" actionListener="#{propostaEtapaBean.alterarDesc}" />
                                    </p:column>
                                </p:row>
                            </f:facet>
                        </p:panelGrid>    
                        <h:panelGrid columns="2" style="text-align: right;">
                            <p:commandButton value="Gravar Etapa - Inserir" update=":frmPropostaEtapa:panel :frmPropostaEtapa:messages" rendered="#{propostaEtapaBean.altera}"
                                             actionListener="#{propostaEtapaBean.inserir}" oncomplete="PF('propostaEtapaDialog').hide();" icon="ui-icon-disk" />
                            <p:commandButton style="text-align: right;" value="Gravar Etapa - Alterar" update=":frmPropostaEtapa:panel :frmPropostaEtapa:messages" rendered="#{!propostaEtapaBean.altera}"
                                             actionListener="#{propostaEtapaBean.alterar}" oncomplete="PF('propostaEtapaDialog').hide();" icon="ui-icon-disk" />
                            <p:commandButton icon="ui-icon-closethick" value="Fechar" onclick="PF('propostaEtapaDialog').hide();" title="Fecha Janela das Etapas!" />
                        </h:panelGrid>

                    </p:panel>
                </p:dialog>

                <p:dialog header="Confirma a Exclusão dessa Etapa - Honorários: #{propostaEtapaBean.selectedPropostaEtapa.nomEtapa}? " widgetVar="confirmation">  

                    <p:commandButton value="Sim" update=":frmPropostaEtapa:panel, :frmPropostaEtapa:tabPropostaEtapa, :frmPropostaEtapa:messages" oncomplete="PF('confirmation').hide(), PF('propostaEtapaDialog').hide()"
                                     actionListener="#{propostaEtapaBean.excluir}" />  
                    <p:commandButton value="Não" onclick="PF('confirmation').hide();" type="button" />   

                </p:dialog>

                <p:dialog header="Confirma a Exclusão desse Escopo: #{propostaEtapaBean.selectedPropostaEtapaPerc.dscPerc}? " widgetVar="confirmationDesc">  

                    <p:commandButton value="Sim" update=":frmPropostaEtapa:panelPropostaEtapa, :frmPropostaEtapa:messages" oncomplete="PF('confirmationDesc').hide()"
                                     actionListener="#{propostaEtapaBean.excluirDesc}" />  
                    <p:commandButton value="Não" onclick="PF('confirmationDesc').hide();" type="button" />   

                </p:dialog>

                <p:dialog header="Confirma a Exclusão de todos os Honorários: #{propostaEtapaBean.selectedPropostaEtapaPerc.dscPerc}? " widgetVar="confirmationPerc">  

                    <p:commandButton value="Sim" update=":frmPropostaEtapa:tabPropostaEtapaPerc, :frmPropostaEtapa:displayPropostaEtapaPerc, :frmPropostaEtapa:messages" oncomplete="PF('confirmationPerc').hide()"
                                     actionListener="#{propostaEtapaBean.excluirPerc}" />  
                    <p:commandButton value="Não" onclick="PF('confirmationPerc').hide();" type="button" />   

                </p:dialog>
            </p:panel>
        </h:form>
    </ui:define>
</ui:composition>
